<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG多边形</title>
</head>

<body>
    <svg height="100" width="200">
        <polygon points="0,0 0,100 200,0" style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
    <div>
        points属性里定义了多边形各个角的x和y坐标，多个坐标间用空格分隔
    </div>
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
    </svg>
    <div>
        fill-rule属性的取值可以是nonzero | evenodd | inherit
    </div>
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
    </svg>
    <div>
        使用fill-rule: evenodd属性
    </div>
    <svg height="210" width="500">
        <polygon points="100,10 40,198 190,78 10,78 160,198"
            style="fill:lime;stroke:purple;stroke-width:5;fill-rule:inherit;" />
    </svg>
    <div>
        使用fill-rule: inherit属性
    </div>
</body>

</html>